<!-- 项目管理 -->
<template>
  <div class="project_list">
    <div class="table">
      <dt-grid ref="tableRef" :onFetch="onFetch" page>
        <template #btn>
          <div class="top_box">
            <div class="flex btn-content">
              <Button type="primary" @click="addProject">新增项目</Button>
              <!-- <Button type="primary" @click="goDetails">项目详情</Button>  -->
            </div>
          </div>
        </template>
      </dt-grid>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import dt from '@dt/dt'
  import { listOpt } from './biz/columns.js'
  import router from '@/router'
  import apiMgr from '../biz/index.js'

  const tableRef = ref()
  const [orgId, filterParams] = [ref(''), ref()]

  function onFetch(data) {
    console.log(data, '222')
    let params = {
      ...data
    }
    filterParams.value = params
    return apiMgr.getTenantPageForWeb(params)
  }

  onMounted(() => {
    tableRef.value.init(new listOpt(fn))
    tableRef.value.fetch()
  })

  function addProject() {
    router.push({
      path: '/tenant/package/project/addEdit',
      query: {
        // type: 'pro'
      }
    })
  }

  // const goDetails = () => {
  //   router.push({
  //     path: '/tenant/package/project/proDetails',
  //     query: {
  //       // type: 'pro'
  //     }
  //   })
  // }

  // function exportExcel() {
  //   apiMgr.exportProjectList({ ...filterParams.value })
  // }
  const fn = {
    //跳转详情
    toDetail: (data) => {
      router.push({
        path: '/tenant/package/project/proDetails',
        query: {
          id: data.id
        }
      })
    },
    // onCheckOrgId: () => {
    //   return { orgId: orgId.value }
    // },
    proEdit: (data) => {
      router.push({
        path: '/tenant/package/project/addEdit',
        query: {
          id: data.id
        }
      })
    },
    delPro: (data) => {
      dt.ui.Modal.confirm({
        title: '删除',
        content: '请确认，是否将当前项目从系统中删除。删除后，已维护的内容将不可恢复',
        onOk: () => {
          let params = {
            tenantId: data.id
          }
          apiMgr.deleteByTenantId(params).then((res) => {
            tableRef.value.fetch()
          })
        }
      })
    }
  }
</script>

<style scoped lang="scss">
  .top_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .project_list {
    height: 100%;
    width: 100%;
    display: flex;

    .table {
      flex: 1;
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
    }

    :deep(.ivu-tree-title) {
      width: calc(100% - 15px);
    }
  }
</style>
